;(function ($) {
  var tabs = [
    ['A', 'B', 'C', 'D', 'E'],
    ['F', 'G', 'H', 'J'],
    ['K', 'L', 'M', 'N', 'P'],
    ['Q', 'R', 'S', 'T', 'W'],
    ['X', 'Y', 'Z']
  ]


  // 封装函数得到有数据的热门城市
  var hotCitiesPanel = function (hotCities) {
    // 创建 wrapper hc
    var $wrapper = $('<div class="wrapper hc"></div>')
    // 创建hottitle
    var $hotTitle = $('<h3 class="hot-title">热门城市：</h3>')
    // 创建all-cities
    var $allCities = $('<div class="all-cities"></div>')

    // 循环遍历数组hotCities
    $.each(hotCities, function (index, city) {
      // 生成cities
      var $cities = $('<span class="cities" code="' + city.code + '">' + city.name + '</span>')
      citySelect($cities)
      $allCities.append($cities)
    })

    return $wrapper.append($hotTitle).append($allCities)

    /* 
      <div class="wrapper hc">
        <h3 class="hot-title">热门城市：</h3>
        <div class="all-cities">
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
          <span class="cities">北京</span>
        </div>
      </div>
    */
  }

  // 生成选项卡
  var tabsPanel = function (tabs) {
    var $tabs = $('<div class="tabs"></div>')
    $.each(tabs, function (index, letters) {
      var className = index === 0 ? 'active' : ''
      letters = letters.join('') // 将数组转换为字符串 ['A', 'B', 'C', 'D', 'E'] ===> ABCDE
      var $tab = $('<div class="tab ' + className + '">' + letters + '</div>')
      $tabs.append($tab)
    })

    return $tabs
    /* 
      <div class="tabs">
        <div class="tab active">ABCDE</div>
        <div class="tab">ABCD</div>
        <div class="tab">ABCDE</div>
        <div class="tab">ABCDE</div>
        <div class="tab">ABC</div>
      </div>
    */
  }

  // 生成tabContent
  var tabContentPanel = function (tabs) {
    var $tabContent = $('<div class="tab-content"></div>')
    $.each(tabs, function (index, letters) {
      var $content = contentPanel(letters)
      index === 0 ? $content.addClass('active') : null
      $tabContent.append($content)
    })
    return $tabContent
  }


  // 生成content
  var contentPanel = function (letters) {
    // ['A', 'B', 'C', 'D', 'E']
    var $content = $('<div class="content"></div>')
    $.each(letters, function (index, letter) {
      var $wrapper = wrapperPanel(letter)
      $content.append($wrapper)
    })
    return $content
  }

  // 生成cities
  var wrapperPanel = function (letter) {
    var citiesArr = area.cities[letter]
    var $wrapper = $('<div class="wrapper"></div>')
    var $letterTitle = $('<h3 class="letter-title">' + letter + '</h3>')
    var $allCities = $('<div class="all-cities"></div>')
    $.each(citiesArr, function (index, city) {
      $city = $('<span class="cities" code="' + city.code + '">' + city.name + '</span>')
      citySelect($city)
      $allCities.append($city)
    })  

    return $wrapper.append($letterTitle).append($allCities)
  }

  // tab切换
  var addTabEvent = function (ele) {
    var $content = ele.next().children()
    // ele就是对应的选项卡tab
    ele.on('mouseover', '.tab',function () {
      $(this).addClass('active').siblings('.active').removeClass('active')
      $content.eq($(this).index()).addClass('active').siblings().removeClass('active')
    })
  }

  // 点击城市名事件
  var citySelect = function (ele) {
    ele.on('click', function () {
      // 设置cookie
      var code = $(this).attr('code')
      $.cookie('code', code)

      // 刷新页面
      location.href = location.href
      /* location.reload()
      location.replace()
      history.go(0) */
    })
  }



  /* 
  <div class="tab-content">
    <div class="content">
      <div class="wrapper">
        <h3 class="letter-title">A</h3>
        <div class="all-cities">
          <span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span>
          <span class="cities">郑州</span><span class="cities">郑州方法</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span>
        </div>
      </div>
      <div class="wrapper">
        <h3 class="letter-title">A</h3>
        <div class="all-cities">
          <span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span><span class="cities">郑州</span>
        </div>
      </div>
    </div>
  </div>

  */



  $.fn.area = function () {

    return this.each(function () {

      var $tabs = tabsPanel(tabs)

      $(this).append(hotCitiesPanel(area.hot)).append($tabs).append(tabContentPanel(tabs))
      addTabEvent($tabs)
      


    })
    
  }

}(jQuery))